<template>
  <div class="address-box">
    <div class="flex ai-c w100">
      <div class="lf flex">
        <div class="l-h17" style="flex-shrink: 0">
          <p class="f16">{{ address && address.name }}</p>
          <span class="tag" v-if="isDefault">默认</span>
        </div>
        <div class="m-l20 l-h17">
          <p class="f16">{{ address &&  address.mobile  }}</p>
          <p class="f14 detail f-c66">{{ address &&  address.address }}</p>
        </div>
      </div>
      <slot>
        <div class="rt">
          编辑
        </div>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    address: Object,
    isDefault: Boolean
  },
};
</script>

<style lang="scss" scoped>
.address-box {
  padding: 2.6rem 1.5rem 1.8rem 1.7rem;
  display: flex;
  border-bottom: 1px solid #eee;
  min-height: 8.9rem;
  .lf {
    flex: 1;

    padding-right: 1.2rem;
  }
  .rt {
    flex-shrink: 0;
    padding-left: 1.2rem;
    border-left: 1px solid #eee;
    color: #777;
    font-size: 1.4rem;
  }
  .detail {
    line-height: 1.2;
    margin-top: 0.4rem;
  }
}
.tag {
  background: #ee5959;
  color: #fff;
  /* padding: 3px px; */
  transform: scale(0.9);
  transform-origin: center;
  font-size: 12px;
  border-radius: 20px;
  padding: 0 5px;
  margin-top: 3px;
  display: block;
  text-align: center;
}
</style>